<template>
  <div class="permission-main">
    <!-- 添加 -->
    <!-- <el-card class="box-card" shadow="hover">
      <el-row>
        <el-button type="primary" class="add-invoice" >添加</el-button>
      </el-row>
    </el-card>-->
    <el-table
      id="IMTable"
      :data="tableData.slice(page.tableStart,page.tableEnd)"
      border
      style="width: 100%"
      :default-sort="{prop: 'id', order: 'ascending'}"
      v-loading="loading"
      ref="multipleTable"
      tooltip-effect="dark"
    >
      <el-table-column show-overflow-tooltip prop="id" label="ID" width="60" sortable align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="姓名"  width="150"  align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="display_name"  width="150"  label="显示姓名" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="created_at" label="注册时间" width="200" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="updated_at" label="更新时间" width="200" align="center"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button v-no-more-click:3000 type="primary" size="small" @click="editPermission(scope.row)">编辑</el-button>
          <el-button v-no-more-click:3000 type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <MyPagination
      :page="page"
      :totle="tableData.length"
      @handle-size-change="handleSizeChange"
      @handle-current-change="handleCurrentChange"
    ></MyPagination>
  </div>
</template>
<script>
import { getPermissionList, delUser } from "~/api/user";
import MyPagination from "~/components/MyPagination";
export default {
  head: {
    title: "权限管理"
  },
  name: "permission",
  data() {
    return {
      loading: false,
      tableData: [],
      // 分页
      page: {
        pageSizes: 10, //一页可以几条
        tableSize: 10, //一页几条
        tableStart: 0, //table数组过滤的第一条索引
        tableEnd: 10, //table数组过滤的最后一条索引
        currentPage: 1, //目前在第几页
        total: 0
      }
    };
  },
  components: {
    MyPagination
  },
  async asyncData({ $axios }) {
    return getPermissionList($axios)
      .then(res => {
        return { tableData: res.data.data };
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    //编辑
    editInvoices(val) {
      this.$refs.editDialog.showDialog("2", val.id);
    },

    //刷新数据
    onChangeList() {
      this.changeData();
    },
    //获取新数据
    changeData() {
      getPermissionList(this.$axios)
        .then(res => {
          this.tableData.splice(0, this.tableData.length, ...res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //选择一页几条
    handleSizeChange(size) {
      this.page.tableSize = size;
      this.page.tableStart = 0;
      this.page.tableEnd = size;
      this.page.currentPage = 1; //返回第一页
    },
    //选择第几页
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.page.tableStart = this.page.tableSize * (currentPage - 1);
      this.page.tableEnd = this.page.tableSize * currentPage;
    }
  }
};
</script>
<style>
.el-card {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 30px; /*no*/
}
</style>
